<template>
    <div>
        <div class="root1">
            <div class="one"><img src="http://www.infinistudio.cn/Public/home/images/title2.png" alt=""></div>
            <div class="two">
                <span @click="to('/Home')">
                <a  @click="ws('home')">HOME</a>
            </span>
                <span @click="to('/Work')">WORK</span>
                <span @click="to('/Contact')">CONTACT</span>
                <span @click="to('/Join')">JOIN US</span>
            </div>
        </div>
        <router-view class="hhh"></router-view>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                 imgObj1:"http://www.infinistudio.cn/ueditor/php/upload/image/20180102/1514891045111796.jpg",
                imgObj2:'http://www.infinistudio.cn/ueditor/php/upload/image/20180102/1514891151129835.jpeg',
                imgObj3:'http://www.infinistudio.cn/ueditor/php/upload/image/20180102/1514891163440215.jpeg',
                imgObj4:'http://www.infinistudio.cn/ueditor/php/upload/image/20180102/1514891212178452.jpeg',
                imgObj5:'http://www.infinistudio.cn/ueditor/php/upload/image/20180102/1514891217557132.jpeg',
                imgUrl: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3867443260,3694460&fm=26&gp=0.jpg',
            }
        },
        methods: {
            to(a) {
                this.$router.push(a)
            },
            ws(key){
                if(key == "home"){
                    window.scrollTo({
                        'top': 1000,
                        'behavior': 'smooth'
                    })
                }
            }
        },

    }
</script>

<style scoped>
    .root1 {
        background-color: rgba(0, 0, 0, 0.7);
        height: 80px;
        /*background-color: olivedrab;*/
        text-align: center;
        padding-top: 20px;
        width: 100%;
        /*position: fixed;*/
        position: fixed;
        z-index: 99;
        /*border: 1px solid transparent;*/
        overflow: hidden;

    }

    .hhh {

        padding-top: 100px;

    }

    .one img {
        width: 110px;
    }

    .one {
        margin-bottom: 10px;
    }

    .two {
        width: 400px;
        display: flex;
        justify-content: space-between;
        margin: auto;
        color: darkgray;
    }

    .two span:hover {
        color: white;
    }
</style>